<template>
  <el-card class="account-container">
    <div class="account">
      <div class="account_l">
        <div class="data">
          <el-card class="data-item" shadow="hover" v-for="(item,index) in hArr" :key="index">
              <div class="card-header">
                <div class="ch_l">
                   <img v-if="index==0" src="@/assets/01_01.png" alt="">
                   <img v-if="index==1" src="@/assets/01_02.png" alt="">
                   <img v-if="index==2" src="@/assets/01_03.png" alt="">
                </div>
                <div class="ch_r">
                  <div class="ch_rh">{{item.number}}</div>
                  <div class="ch_rp">{{item.name}}</div>
                </div>
              </div>
          </el-card>
      </div>
      <div class="o_l">
        <div class="o_litem" v-for="(item,index) in oArr" :key="index">
          <div class="ol_n">{{item.name}}</div>
          <div class="ol_n"><span class="ol_sapn">{{item.number}}</span> 单</div>
        </div>
      </div>
      <!--统计数据-->
      <div class="sc">
        <div class="sc_t">
          <img src="@/assets/01_04.png" alt="">
          <span class="st_t">统计数据</span>
          <span class="st_c">(截止日期: 2021-05-05)</span>
        </div>
          <div class="sc_l">
            <div class="sc_litem" v-for="(item,index) in bArr" :key="index">
              <div class="sc_n">{{item.name}}<span style="font-size:14px;">{{item.sName}}</span></div>
              <div class="sc_n"><span class="sc_sapn">{{item.number}}</span></div>
            </div>
        </div>
        <div class="sc_l">
            <div class="sc_litem" v-for="(item,index) in cArr" :key="index">
              <div class="sc_n">{{item.name}}</div>
              <div class="sc_n">{{item.number}}</div>
            </div>
        </div>
      </div>
      </div>
      <div class="account_r">
        <div class="sc_t">
          <img src="@/assets/01_05.png" alt="" style="vertical-align: middle;">
          <span class="st_t">店铺热销商品</span>
        </div>
        <div class="g_li" v-for="(item,index) in eArr" :key="index">
            <el-image style="width: 60px; height: 60px" :src="item.pimg"> </el-image>
            <el-image class="g_img" :src="item.img"> </el-image>
            <div class="g_info">
              <p class="mui-ellipsis2 g_name">{{item.name}}</p>
              <p class="g_price">￥{{item.price}}</p>
            </div>
        </div>
        <router-link class="g_add" to="/add"><img src="@/assets/01_06.png" alt="" style="width: 60px; height: 60px;vertical-align: middle;">上传更多商品</router-link>
      </div>
    </div>
    <!---底部信息--->
    <div class="d_b">
       <div class="db_l">
         <div class="sc_t">
          <img src="@/assets/01_07.png" alt="" style="vertical-align: middle;">
          <span class="st_t">商家课堂</span>
        </div>
        <div class="db_list">
          <a href="http://www.globalhexi.com/hexism/html/h5.html?id=B0728EF6E1D94433866923FF02CBCBBE" target="_blank">1.商家如何上传商品,上传商品细则</a>
          <a href="http://www.globalhexi.com/hexism/html/h5.html?id=23D7F525A490456F83BCDC5746E3812B" target="_blank">2.如何提交店铺销量</a>
          <a href="http://www.globalhexi.com/hexism/html/h5.html?id=EFD6E560285452EBD315A20EDD0AD55" target="_blank">3.如何获得社邻拼首页推荐位</a>
        </div>
       </div>
       <div class="db_r">
         <div class="db_r_li" v-for="(item,index) in dArr" :key="index">
             <el-image style="width: 140px; height: 140px" :src="item.url"> </el-image>
             <p class="db_r_p">{{item.name}}</p>
         </div>
       </div>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {getData} from '@/utils/axios'
import { store } from '@/store'
export default {
  name: 'Introduce',
  setup() {
     const state = reactive({
      busbaseId:store.getters.busId,
      adminId:store.getters.adminId, 
      hArr: [
        {name:'今日交易金额',number:'￥0.00'},
        {name:'今日交易笔数',number:'0'},
        {name:'今日访问量',number:'0'},
      ],
    oArr:[
      {name:'待成团',number:'0'},
      {name:'待发货',number:'0'},
      {name:'待收货',number:'0'},
      {name:'退款退货',number:'0'},
    ],
     bArr:[
      {name:'历史成交总额',number:'0.00'},
      {name:'账户余额',number:'0.00',sName:'(可提现)'},
      {name:'交易中金额',number:'0.00'},
    ],
     cArr:[
      {name:'顾客总数',number:'0'},
      {name:'总收藏数',number:'0'},
      {name:'总访问量',number:'0'},
    ],
    dArr:[
      {url:'https://www.shelinpin.com/oss/logo/erWeiMa/slp_mini_bus.jpg',name:'社邻拼商家端小程序'},
      {url:'https://www.shelinpin.com/oss/logo/erWeiMa/slp_mini_mem.jpg',name:'社邻拼用户端小程序'},
      {url:'https://www.shelinpin.com/oss/logo/erWeiMa/slp_pub_mem.jpg',name:'社邻拼公众号'},
    ],
    eArr:[
      // {pimg:'../../src/assets/01_08.png',img:'https://www.shelinpin.com/oss/common/2021/1D/6A/1D6A7C6B10554667B1A2F1E74F20E440_source.jpg',name:'测试商品美蛙鱼头超级好吃的不得了',price:'87'},
      // {pimg:'../../src/assets/01_09.png',img:'https://www.shelinpin.com/oss/common/2021/1D/6A/1D6A7C6B10554667B1A2F1E74F20E440_source.jpg',name:'测试商品美蛙鱼头超级好吃的不得了',price:'87'},
      // {pimg:'../../src/assets/01_10.png',img:'https://www.shelinpin.com/oss/common/2021/1D/6A/1D6A7C6B10554667B1A2F1E74F20E440_source.jpg',name:'测试商品美蛙鱼头超级好吃的不得了',price:'87'}
    ]
    })
   onMounted(() => {
      getOrder()
    })
    const getOrder = () => {//商户获取店铺各订单统计数量
       getData('/order/orderBus/getBusbaseOrderStatisticDatas',{adminId:state.adminId,busbaseId:state.busbaseId}).then(res=>{
                console.log('获取订单数据',res.data)
                if(res.data.flag){
                  state.oArr[0].number=res.data.data.needPin;
                  state.oArr[1].number=res.data.data.needShip;
                  state.oArr[2].number=res.data.data.needSuccess;
                  state.oArr[3].number=res.data.data.applyReturn;
                }
            }) 
      getData('/busMem/busbase/getBusbaseDataStatistic',{busbaseId:state.busbaseId}).then(res=>{
                console.log('获取交易数据',res.data)
                  if(res.data.flag){
                    let datas=res.data.data;
                    state.hArr[0].number=(datas.todayTransMoney/100).toFixed(2);//今日成交金额
                    state.hArr[1].number=datas.todayTransNum;//今日成交笔数
                    state.hArr[2].number=datas.todayViewNum;//今日访问量
                    state.bArr[0].number=(datas.hisTransMoney/100).toFixed(2);//历史成交总额
                    state.bArr[1].number=(datas.availableAmount/100).toFixed(2);//待提现金额
                    state.bArr[2].number=(datas.transMoney/100).toFixed(2);//交易中金额
                    state.cArr[0].number=datas.hisConsumerNum;//顾客总数
                    state.cArr[1].number=datas.collectionNum;//总收藏数
                    state.cArr[2].number=datas.viewTotalNum;//总访问量
                  }
            })            
    } 
    return {
        ...toRefs(state),
    }
  }
}
</script>
<style scoped>
 .account-container{background: #F9F7F8;}
 .account{display: flex;justify-content: space-between;margin-bottom: 30px;}
 .account_l{flex: 1;}
 .account_r{width: 420px;height:551px;background: #fff;margin:0 20px;padding: 3px 10px;position: relative;}
 .data {display: flex;justify-content: space-between;}
 .card-header{display: flex;padding-right: 20px;}
 .ch_l{margin-right: 15px;display: flex;align-items: center;}
 .ch_l img{width: 70px;height: 70px;}
 .ch_r{text-align: center;font-size: 18px;font-weight: bold;line-height: 50px;}
 .ch_rh{color: #DD1B28;font-size: 22px;}
 .o_l{background: #fff;display: flex;justify-content: space-between;margin:25px 0;text-align: left;padding:5px 15px;}
 .ol_n{line-height: 50px;font-size: 16px;min-width:140px;}
 .ol_sapn{font-size: 24px;font-weight: bold;color: #000;}
 .sc{background: #fff;}
 .sc_t{border-bottom: 1px solid #ddd;padding: 2px;}
 .sc_t img{width: 45px;height: 45px;vertical-align: bottom;}
 .st_t{margin-left:10px;font-size: 18px;}
 .st_c{font-size: 14px;}
 .sc_l{background: #fff;display: flex;justify-content: space-between;padding-bottom: 20px;text-align: left;padding:5px 15px;}
 .sc_n{line-height: 45px;font-size: 16px;min-width:140px;}
 .sc_sapn{color: #DD1B28;font-size: 22px;font-weight: bold;}
 .d_b{display: flex;justify-content: space-between;background: #fff;margin-right:20px;padding:5px 15px;}
 .db_l{width: 400px;margin-right:30px;}
 .db_r{flex: 1;display: flex;justify-content: space-around;}
 .db_list{padding-top: 15px;}
 .db_list a{line-height: 45px;font-weight: 550;color: #000;display: block;cursor: pointer;}
 .db_r_li{float: left;text-align: center;padding-top: 20px;}
 .db_r_p{line-height: 40px;}
 .g_li{display: flex;align-items: center;padding: 10px 0 30px;}
 .g_img{width: 100px; height: 100px;margin:0 15px;border-radius: 5px;}
 .g_info{flex: 1;}
 .g_name{line-height: 30px;}
 .g_price{line-height: 40px;color:#DD1B28 ;}
 .g_add{position: absolute;right: 10px;bottom:0px;font-size: 18px;}
</style>